<style lang="less" scoped>
    
    .editCourse{
        width: 100%;
        height: 100%;
        position: fixed;
        top:0;
        left: 0;
        background:url('../images/jiaocheng_bg.png') no-repeat;
        background-size: 100% 100%;
        z-index: 11;
        // display: none;
        .editCoursePop{
            width: 100%;
            height: 100%;
            position: fixed;
            top:0;
            left: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 19;
        }
        .step{
            width: 340px;
            height: 360px;
            background-color: #fff;
            .icon{
                width: 100%;
                height: 164px;
                // box-shadow: 0 4px 4px 0 rgba(77,178,235,0.30);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .closeStep{
                position: absolute;
                width: 20px;
                height: 20px;
                top:10px;
                right:10px;
                background:url('../images/assembly_close.png') no-repeat;
                background-size: 100% 100%;
                cursor: pointer;
            }
            .text{
                width:100%;
                height: 210px;
                padding: 6px 30px 30px 30px;
                position: relative;
                .title{
                    font-size: 14px;
                    color: #686E71;
                    line-height: 22px;
                    font-weight: bold;
                }
                .content{
                    font-size: 14px;
                    color: #686E71;
                    line-height: 22px;
                }
                .page{
                    position: absolute;
                    left: 0;
                    bottom:30px;
                    line-height: 30px;
                    width: 100%;
                    height: 30px;
                    padding: 0 30px;
                    span{
                        font-size: 12px;
                        color: #B4BDC1;
                        float: left;
                    }
                    div{
                        float: right;
                        width: 80px;
                        height: 30px;
                        background: #FFFFFF;
                        border: 1px solid #4DB2EB;
                        box-shadow: 0 2px 4px 0 rgba(77,178,235,0.30);
                        border-radius: 4px;
                        font-size: 14px;
                        color: #4CB2EB;
                        text-align: center;
                        cursor: pointer;
                    }
                    div:hover{
                        background-image: linear-gradient(90deg, #4CB2EB 0%, #4CD3EB 100%);
                        background: #4DB2EB;
                        color:#fff;
                    }
                    .syb{
                        margin-right: 20px;
                    }
                    .not{
                        color: #B4BDC1;
                        border: 0;
                        box-shadow:none;
                    }
                    .not:hover{
                        color: #B4BDC1;
                        background:#fff;
                        background-image:none;
                    }
                }
            }
        }
        .top{
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            min-width: 1200px;
            height: 60px;
            background:#2A2A2A;
            // z-index: 13;
            .logo{
                margin-left:30px;
                background:url('../images/logo.png') 0 center no-repeat;
                width:93px;
                height:60px;
                float:left;
                cursor: pointer;
            }
            .topMiddle{
                float:right;
                margin-right: 10%;
                position: relative;
                .step5gl{
                    position: absolute;
                    top: 0;
                    left: 0;
                    // width: 324px;;
                    // height: 60px;
                    z-index: 20;
                }
                .step5{
                    position: absolute;
                    top: 90px;
                    left: 105px;
                    z-index: 20;
                    .arrows{
                        position: absolute;
                        width: 20px;
                        height: 10px;
                        background:url('../images/jiaocheng_arrow_top.png') no-repeat;
                        background-size: 100% 100%;
                        top:-10px;
                        left:20px;
                    }
                }
            }
            .topRight{
                float:right;
                position: relative;
                .step6gl{
                    position: absolute;
                    top: 0;
                    left: 0;
                    // width: 324px;;
                    // height: 60px;
                    z-index: 20;
                }
                .step6{
                    position: absolute;
                    top: 90px;
                    left: -30px;
                    z-index: 20;
                    .arrows{
                        position: absolute;
                        width: 20px;
                        height: 10px;
                        background:url('../images/jiaocheng_arrow_top.png') no-repeat;
                        background-size: 100% 100%;
                        top:-10px;
                        left:20px;
                    }
                }
            }
        }
        .left{
            position: absolute;
            top:0;
            left: 0;
            width: 556px;
            height: 100%;
            padding-top:60px;
            // z-index: 12;
            .list{
                float: left;
                width: 180px;
                height: 100%;
                background-color: #222;
                position: relative;
                .img1{
                    position: absolute;
                    width: 100%;
                    // height: 100%;
                    top:0;
                    left: 0;
                    z-index: 13;
                }
                .img2{
                    position: absolute;
                    width: 100%;
                    // height: 100%;
                    top:0;
                    left: 0;
                    z-index: 20;
                }
                .step1{
                    position: absolute;
                    top:30px;
                    left: 200px;
                    z-index: 20;
                    .arrows{
                        position: absolute;
                        width: 10px;
                        height: 20px;
                        background:url('../images/jiaocheng_arrow_left.png') no-repeat;
                        background-size: 100% 100%;
                        top:30px;
                        left:-10px;
                    }
                }
            }
            .leftCon{
                float: left;
                width: 360px;
                height: 100%;
                position: relative;
                .img1{
                    position: absolute;
                    width: 100%;
                    // height: 100%;
                    top:0;
                    left: 0;
                    z-index: 13;
                }
                .img2{
                    position: absolute;
                    width: 100%;
                    // height: 100%;
                    top:0;
                    left: 0;
                    z-index: 20;
                }
                .step2{
                    position: absolute;
                    top:0px;
                    left: 390px;
                    z-index: 20;
                    .arrows{
                        position: absolute;
                        width: 10px;
                        height: 20px;
                        background:url('../images/jiaocheng_arrow_left.png') no-repeat;
                        background-size: 100% 100%;
                        top:30px;
                        left:-10px;
                    }
                }
                .step10gl{
                    position: absolute;
                    width: 100%;
                    // height: 100%;
                    top:0;
                    left: 0;
                    z-index: 20;
                }
                .step10{
                    position: absolute;
                    top:30px;
                    left: 390px;
                    z-index: 20;
                    .arrows{
                        position: absolute;
                        width: 10px;
                        height: 20px;
                        background:url('../images/jiaocheng_arrow_left.png') no-repeat;
                        background-size: 100% 100%;
                        top:30px;
                        left:-10px;
                    }
                }
                
            }
        }
        .right{
            position: absolute;
            width: 71.5%;
            left: 541px;
            // min-height: 100%;
            height: 100%;
            padding-top: 60px;
            display: flex;
            align-items: center;
            .img{
                margin: 0px auto;
                width: 700px;
                position: relative;
                // height: 100%;
                .bg{
                    width: 600px;
                    height: 618px;
                    position: relative;
                    z-index: -1;
                }
                .gl{
                    position: absolute;
                    top: 145px;
                    left: 143px;
                    width: 261px;
                    height: 415px;
                    z-index: 20;
                }
                .step3{
                    position: absolute;
                    top: 145px;
                    left: -213px;
                    z-index: 20;
                    .arrows{
                        position: absolute;
                        width: 10px;
                        height: 20px;
                        background:url('../images/jiaocheng_arrow_right.png') no-repeat;
                        background-size: 100% 100%;
                        top:30px;
                        right:-10px;
                    }
                }
                .step4gl{
                    position: absolute;
                    top: 143px;
                    left: 442px;
                    width: 35px;
                    height: 380px;
                    z-index: 20;
                }
                .step4{
                    position: absolute;
                    top: 145px;
                    left: 79px;
                    z-index: 20;
                    .arrows{
                        position: absolute;
                        width: 10px;
                        height: 20px;
                        background:url('../images/jiaocheng_arrow_right.png') no-repeat;
                        background-size: 100% 100%;
                        top:30px;
                        right:-10px;
                    }
                }
                .step7gl{
                    position: absolute;
                    top: -30px;
                    left: -151px;
                    width: 280px;
                    height: 598px;
                    z-index: 20;
                }
                .step7{
                    position: absolute;
                    top: -30px;
                    left: 158px;
                    z-index: 20;
                    .arrows{
                        position: absolute;
                        width: 10px;
                        height: 20px;
                        background:url('../images/jiaocheng_arrow_left.png') no-repeat;
                        background-size: 100% 100%;
                        top:30px;
                        left:-10px;
                    }
                }
                .step8gl{
                    position: absolute;
                    top: 144px;
                    left: 143px;
                    width: 260px;
                    height: 30px;
                    z-index: 20;
                }
                .step8{
                    position: absolute;
                    top: 121px;
                    left: -214px;
                    z-index: 20;
                    .arrows{
                        position: absolute;
                        width: 10px;
                        height: 20px;
                        background:url('../images/jiaocheng_arrow_right.png') no-repeat;
                        background-size: 100% 100%;
                        top:30px;
                        right:-10px;
                    }
                }
                .step9gl{
                    position: absolute;
                    top: 176px;
                    left: 143px;
                    width: 260px;
                    height: 70px;
                    z-index: 20;
                }
                .step9{
                    position: absolute;
                    top: 158px;
                    left: -214px;
                    z-index: 20;
                    .arrows{
                        position: absolute;
                        width: 10px;
                        height: 20px;
                        background:url('../images/jiaocheng_arrow_right.png') no-repeat;
                        background-size: 100% 100%;
                        top:30px;
                        right:-10px;
                    }
                }

            }
        }
    }

    // @media screen and (max-width: 1500px) {
    //     .editCourse{
    //         .right{
    //             .img{
    //                 img{
    //                 }
    //             }
    //         }
    //     }
    // }
</style>
<style lang="less">
.editCourse{
    
}
</style>
<template>
	<div>
        <!-- 大背景 -->
        <div class="editCourse" v-show="openEditCourse">
            <!-- 大遮罩 -->
            <div class="editCoursePop"></div>
            <!-- 顶部 -->
            <div class="top">
                <div class="logo"></div>
                <div class="topRight">
                    <img class="topRight" src="../images/gaoliang6.png" /> 
                    <!-- 第六步 -->
                    <img src="../images/gaoliang6.png" class="step6gl" v-show="sixFlg"/>
                    <div class="step step6" v-show="sixFlg">   
                        <div class="closeStep" @click="closeStepFun"></div>                      
                        <div class="arrows"></div>
                        <div class="icon"><img src="../images/bz6.png"/></div>
                        <div class="text">
                            <p class="title">传记操作区</p>
                            <p class="content">电脑端预览传记，保存传记到草稿箱，发布传记提交审核，退出编辑页面。</p>
                            <div class="page">
                                <span>6 / 10</span>
                                <div @click="sixStepNext">下一步</div>
                                <div class="syb" @click="sixStepPre">上一步</div>
                            </div>  
                        </div>                                         
                    </div>                                   
                </div>
                <div class="topMiddle"> 
                    <img  src="../images/gaoliang5.png"/>       
                    <!-- 第五步 -->
                    <img src="../images/gaoliang5.png" class="step5gl" v-show="fiveFlg"/>
                    <div class="step step5" v-show="fiveFlg"> 
                        <div class="closeStep" @click="closeStepFun"></div>                        
                        <div class="arrows"></div>
                        <div class="icon"><img src="../images/bz5.png"/></div>
                        <div class="text">
                            <p class="title">操作区</p>
                            <p class="content">新增文本、图片、视频，设置背景音乐、模块背景，传记分享设置。</p>
                            <div class="page">
                                <span>5 / 10</span>
                                <div @click="fiveStepNext">下一步</div>
                                <div class="syb" @click="fiveStepPre">上一步</div>
                            </div>  
                        </div>                                         
                    </div>
                </div>
            </div>
            <!-- 左侧 -->
            <div class="left">
                <!-- 模板列表 -->
                <div class="list">
                    <img src="../images/gaoliang1.png" class="img1"/>
                    <!-- 第一步 -->
                    <img src="../images/gaoliang1.png" class="img2" v-show="oneFlg"/>
                    <div class="step step1" v-show="oneFlg">  
                        <div class="closeStep" @click="closeStepFun"></div>                       
                        <div class="arrows"></div>
                        <div class="icon"><img src="../images/bz1.png"/></div>
                        <div class="text">
                            <p class="title">模板操作区</p>
                            <p class="content">更换模板、删除当前模块、新增模板、更改模块名称、拖动排序模块</p>
                            <div class="page">
                                <span>1 / 10</span>
                                <div @click="oneStepNext()">下一步</div>
                                <div class="syb not">上一步</div>
                            </div>  
                        </div>                                         
                    </div>
                </div>
                <!-- 录入框 -->
                <div class="leftCon">
                    <img src="../images/gaoliang2.png" class="img1"/>
                    <!-- 第二步 -->
                    <img src="../images/gaoliang2.png" class="img2" v-show="twoFlg"/>
                    <div class="step step2" v-show="twoFlg">    
                        <div class="closeStep" @click="closeStepFun"></div>                     
                        <div class="arrows"></div>
                        <div class="icon"><img src="../images/bz2.png"/></div>
                        <div class="text">
                            <p class="title">录入区</p>
                            <p class="content">填写信息、上传照片、视频、人生旅途、作品。</p>
                            <div class="page">
                                <span>2 / 10</span>
                                <div @click="twoStepNext">下一步</div>
                                <div class="syb" @click="twoStepPre">上一步</div>
                            </div>  
                        </div>                                         
                    </div>
                    <!-- 第十步 -->
                    <img src="../images/gaoliang10.png" class="step10gl" v-show="tenFlg"/>
                    <div class="step step10" v-show="tenFlg">  
                        <div class="closeStep" @click="closeStepFun"></div>                       
                        <div class="arrows"></div>
                        <div class="icon"><img src="../images/bz10.png"/></div>
                        <div class="text">
                            <p class="title">视频区</p>
                            <p class="content">视频模块包括上传视频、从我的上传、编辑展示视频、管理视频等功能。手机端查看视频时，可以通过左滑来查看更多上传的视频。</p>
                            <div class="page">
                                <span>10 / 10</span>
                                <div @click="tenStepNext">我知道了</div>
                                <div class="syb" @click="tenStepPre">上一步</div>
                            </div>  
                        </div>                                         
                    </div>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="right">
                <div class="img">
                    <img src="../images/tongyong7.png" class="bg" />
                    <!-- 第三步 -->
                    <img src="../images/gaoliang3.png" class="gl" v-show="threeFlg">
                    <div class="step step3" v-show="threeFlg"> 
                        <div class="closeStep" @click="closeStepFun"></div>                        
                        <div class="arrows"></div>
                        <div class="icon"><img src="../images/bz3.png"/></div>
                        <div class="text">
                            <p class="title">设计区</p>
                            <p class="content">此处为主要设计区。通过设计元件位置、外观，完成传记界面设置。双击文本利用编辑横条进行编辑，双击图片进行替换。点击姓名切换双人穴传记。</p>
                            <div class="page">
                                <span>3 / 10</span>
                                <div @click="threeStepNext">下一步</div>
                                <div class="syb" @click="threeStepPre">上一步</div>
                            </div>  
                        </div>                                         
                    </div>
                    <!-- 第四步 -->
                    <img src="../images/gaoliang4.png" class="step4gl" v-show="fourFlg">
                    <div class="step step4" v-show="fourFlg"> 
                        <div class="closeStep" @click="closeStepFun"></div>                        
                        <div class="arrows"></div>
                        <div class="icon"><img src="../images/bz4.png"/></div>
                        <div class="text">
                            <p class="title">竖条操作区</p>
                            <p class="content">包括撤回、恢复、手机预览、置顶、元件对齐、元件旋转、删除原件、背景音乐、模块背景操作。</p>
                            <div class="page">
                                <span>4 / 10</span>
                                <div @click="fourStepNext">下一步</div>
                                <div class="syb" @click="fourStepPre">上一步</div>
                            </div>  
                        </div>                                         
                    </div>
                    <!-- 第七步 -->
                    <img src="../images/gaoliang7.png" class="step7gl" v-show="sevenFlg">
                    <div class="step step7" v-show="sevenFlg">  
                        <div class="closeStep" @click="closeStepFun"></div>                       
                        <div class="arrows"></div>
                        <div class="icon"><img src="../images/bz7.png"/></div>
                        <div class="text">
                            <p class="title">文本组件设置</p>
                            <p class="content">单击文本，对文本进行样式展示设置。</p>
                            <div class="page">
                                <span>7 / 10</span>
                                <div @click="sevenStepNext">下一步</div>
                                <div class="syb" @click="sevenStepPre">上一步</div>
                            </div>  
                        </div>                                         
                    </div>
                    <!-- 第八步 -->
                    <img src="../images/gaoliang8.png" class="step8gl" v-show="eightFlg">
                    <div class="step step8" v-show="eightFlg"> 
                        <div class="closeStep" @click="closeStepFun"></div>                        
                        <div class="arrows"></div>
                        <div class="icon"><img src="../images/bz8.png"/></div>
                        <div class="text">
                            <p class="title">图标设置</p>
                            <p class="content">双击图标替换模块图标。</p>
                            <div class="page">
                                <span>8 / 10</span>
                                <div @click="eightStepNext">下一步</div>
                                <div class="syb" @click="eightStepPre">上一步</div>
                            </div>  
                        </div>                                         
                    </div>
                    <!-- 第九步 -->
                    <img src="../images/gaoliang9.png" class="step9gl" v-show="nineFlg">
                    <div class="step step9" v-show="nineFlg">     
                        <div class="closeStep" @click="closeStepFun"></div>                   
                        <div class="arrows"></div>
                        <div class="icon"><img src="../images/bz9.png"/></div>
                        <div class="text">
                            <p class="title">人生旅途</p>
                            <p class="content">滑动年份图标后单击，切换显示人生旅途；点击周围区域进行人生旅途模块时间轴样式设置，包括节点样式、轴线样式。</p>
                            <div class="page">
                                <span>9 / 10</span>
                                <div @click="nineStepNext">下一步</div>
                                <div class="syb" @click="nineStepPre">上一步</div>
                            </div>  
                        </div>                                         
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
    import global from '../config/global'
	import { mapState } from 'vuex'
    import { USER_SIGNIN } from 'store/user'
    export default {
        computed: mapState({ user: state => state.user }),
		data() {
				return {
                    oneFlg:false,
                    twoFlg:false,
                    threeFlg:false,
                    fourFlg:false,
                    fiveFlg:false,
                    sixFlg:false,
                    sevenFlg:false,
                    eightFlg:false,
                    nineFlg:false,
                    tenFlg:false,
                    //editCourseFlg:false,
				}
			},
        watch:{
            "openEditCourse":function(){
                if(this.openEditCourse){
                    this.oneFlg = true;
                }
            }
        },
        props:["openEditCourse"],
		methods:{
            oneStepNext(){
                this.oneFlg = false;//隐藏第一步
                this.twoFlg = true;
            },
            twoStepNext(){//第二步中的下一步
                this.twoFlg = false;
                this.threeFlg = true;
            },
            twoStepPre(){//第二步中的上一步
                this.oneFlg = true;
                this.twoFlg = false;
            },
            threeStepNext(){
                this.threeFlg = false;
                this.fourFlg = true;
            },
            threeStepPre(){
                this.twoFlg = true;
                this.threeFlg = false;
            },
            fourStepNext(){
                this.fourFlg = false;
                this.fiveFlg = true;
            },
            fourStepPre(){
                this.threeFlg = true;
                this.fourFlg = false;
            },
            fiveStepNext(){
                this.fiveFlg = false;
                this.sixFlg = true;
            },
            fiveStepPre(){
                this.fourFlg = true;
                this.fiveFlg = false;
            },
            sixStepNext(){
                this.sixFlg = false;
                this.sevenFlg = true;
            },
            sixStepPre(){
                this.sixFlg = false;
                this.fiveFlg = true;                
            },
            sevenStepNext(){
                this.sevenFlg = false;       
                this.eightFlg = true;             
            },
            sevenStepPre(){
                this.sixFlg = true;
                this.sevenFlg = false;    
            },
            eightStepNext(){
                this.eightFlg = false;
                this.nineFlg = true;
            },
            eightStepPre(){
                this.eightFlg = false;
                this.sevenFlg = true;
            },
            nineStepNext(){
                this.nineFlg = false;      
                this.tenFlg = true;          
            },
            nineStepPre(){
                this.nineFlg = false;
                this.eightFlg = true; 
            },
            tenStepNext(){
                this.tenFlg = false;
                //关闭弹窗
                this.$emit("openEditCourseFun",false);
            },
            tenStepPre(){
                this.tenFlg = false;
                this.nineFlg = true;
            },
            closeStepFun(){
                //关闭弹窗
                this.$emit("openEditCourseFun",false);
                this.oneFlg = false;
                this.twoFlg=false;
                this.threeFlg=false;
                this.fourFlg=false;
                this.fiveFlg=false;
                this.sixFlg=false;
                this.sevenFlg=false;
                this.eightFlg=false;
                this.nineFlg=false;
                this.tenFlg=false;
            }

        }
    }
</script>